<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript">
  	
    	
</script>
</head>
<body>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;height:400px;text-align: center;border: 1px solid red;"></div> 
       <script type="text/javascript" src="static/js/echarts.min.js"></script>
       <script type="text/javascript">
       	  // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //柱形上的文字        
    var labelOption = {
    normal: {
        show: true,
     	 fontSize: 16,
    }
};

option = {
    //柱子颜色
    color: ['#003366', '#006699', '#4cabce', '#e5323e'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data: [1,2,3]
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Forest',
            type: 'bar',           
            barGap: 0,
            label: labelOption,
            data: []
        },
        {
            name: 'Steppe',
            type: 'bar',
            label: labelOption,
            data: []
        },
        {
            name: 'Desert',
            type: 'bar',
            label: labelOption,
            data: []
        },
        {
            name: 'Wetland',
            type: 'bar',
            label: labelOption,
            data: []
        }
    ]
};
         // 使用刚指定的配置项和数据显示图表。
         $(function(){        		
                $.ajax({
               	 url:'RegistrFromAll?1',
                    type:'post',        
                    success:function(v){ 
                   		console.log(v);
                    	var names = [];
                    	var a = [];
                    	$.each(v,function(index,value){
                    		names.push(value.name);
                    		a.push(value.value);
                    	});
                    	var a1 = [2,3,4];
                    	var a2 = [4,5,6];
                    	var a3 = [6,5,3];
                    	option.series[0].data= a ;
                    	option.series[1].data= a1 ;
                    	option.series[2].data= a2 ;
                    	option.series[3].data= a3 ;
                    	option.legend.data= names ; 
                    	$.each(names,function(index,value){
                        	option.series[index].name=value;
                    	})  
                   		console.log(a);
                    	myChart.setOption(option);  
                    }
                })
                
              
         	});  
        </script> 
  
</body>
</html>
